<script setup>
import SmartWear from './components/SmartWear.vue'
import AdminDashboard from './components/AdminDashboard.vue'
import UserManagement from './components/UserManagement.vue'
import DeviceManagement from './components/DeviceManagement.vue'
import SystemSettings from './components/SystemSettings.vue'
import DataAnalysis from './components/DataAnalysis.vue'
import SystemMonitor from './components/SystemMonitor.vue'
import LoginPage from './components/LoginPage.vue'
import DealerSales from './components/DealerSales.vue'
import { ref, watch, computed, provide, onMounted } from 'vue'
import Sidebar from './components/Sidebar.vue'

// 用户数据持久化 key
const USER_KEY = 'smartwear_users'

// 初始化用户数据
function getInitUsers() {
  const local = localStorage.getItem(USER_KEY)
  if (local) {
    try {
      return JSON.parse(local)
    } catch {
      // fallback
    }
  }
  return [
    { id: 1, username: 'user1', email: 'user1@email.com', role: 'admin', active: true },
    { id: 2, username: 'user2', email: 'user2@email.com', role: 'manager', active: true },
    { id: 3, username: 'user3', email: 'user3@email.com', role: 'user', active: false },
    { id: 4, username: 'user4', email: 'user4@email.com', role: 'user', active: true },
  ]
}
const users = ref(getInitUsers())

// 监听用户数据变化，自动保存到 localStorage
watch(users, (val) => {
  localStorage.setItem(USER_KEY, JSON.stringify(val))
}, { deep: true })

provide('users', users)

const currentPage = ref('login')
const userRole = ref('')

function handleLogin({ username, role }) {
  userRole.value = role
  currentPage.value = 'home'
}

function canAccess(page) {
  if (userRole.value === 'admin') return true
  if (userRole.value === 'manager') {
    // 管理层不能访问用户管理，但可访问经销商销售额
    return page !== 'user'
  }
  if (userRole.value === 'user') {
    // 普通用户仅能访问首页、数据分析、系统监控
    return ['home', 'analysis', 'monitor'].includes(page)
  }
  return false
}

provide('userRole', userRole)
</script>

<template>
  <div>
    <LoginPage v-if="currentPage === 'login'" @login="handleLogin" />
    <template v-else>
      <nav style="margin-bottom: 2rem;">
        <button v-if="canAccess('home')" @click="currentPage = 'home'">智能健身衣首页</button>
        <button v-if="canAccess('smartwear')" @click="currentPage = 'smartwear'">智能健身衣</button>
        <button v-if="canAccess('admin')" @click="currentPage = 'admin'">管理中心</button>
        <button v-if="canAccess('user')" @click="currentPage = 'user'">用户管理</button>
        <button v-if="canAccess('device')" @click="currentPage = 'device'">设备管理</button>
        <button v-if="canAccess('settings')" @click="currentPage = 'settings'">系统设置</button>
        <button v-if="canAccess('analysis')" @click="currentPage = 'analysis'">数据分析</button>
        <button v-if="canAccess('dealersales')" @click="currentPage = 'dealersales'">经销商销售额</button>
        <button v-if="canAccess('monitor')" @click="currentPage = 'monitor'">系统监控</button>
        <button style="margin-left:2rem;" @click="currentPage = 'login';userRole=''">退出登录</button>
      </nav>
      <div v-if="currentPage === 'home'">
        <div class="home-welcome">
          <h1>欢迎进入智能健身衣平台</h1>
          <p>请通过上方导航进入各功能页面。</p>
        </div>
      </div>
      <SmartWear v-else-if="currentPage === 'smartwear'" />
      <AdminDashboard v-else-if="currentPage === 'admin'" />
      <UserManagement v-else-if="currentPage === 'user'" />
      <DeviceManagement v-else-if="currentPage === 'device'" />
      <SystemSettings v-else-if="currentPage === 'settings'" />
      <DataAnalysis v-else-if="currentPage === 'analysis'" />
      <SystemMonitor v-else-if="currentPage === 'monitor'" />
      <DealerSales v-else-if="currentPage === 'dealersales'" />
    </template>
  </div>
</template>

<style scoped>
nav {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}
nav button {
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 4px;
  background: var(--theme-color, #e3f2eb);
  color: #ffffff;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s;
}
nav button:hover {
  background: var(--theme-color, #e2eae7);
  filter: brightness(0.9);
}
.home-welcome {
  text-align: center;
  margin-top: 3rem;
}
</style>
